<template>
	<view class="grid_flex">
		<view v-for="(item,index) in iconList" :key="index" class="grid_item_flex" @click="jump(item.url)">
			<template v-if="shenheState && shouldHideIcon.includes(item.name)">
				<u-image :src="item.icon" width="84rpx" height="84rpx" shape="circle"></u-image>
				<view class="grid_text">等待开发</view>
			</template>
			<template v-else>
				<u-image :src="item.icon" width="84rpx" height="84rpx" shape="circle"></u-image>
				<view class="grid_text">{{ item.name }}</view>
			</template>
		</view>
	</view>
</template>

<script>
export default {
  name: 'UsePanel',
  props: {
    fromType: {
      type: String,
      default: 'index' // index首页、mine我的
    },
    iconList: { type: Array }
  },
  data() {
    return {
      shenheState: true,
      shouldHideIcon: ['我的追剧', '观看历史']
    }
  },
  created() {
    this.shenheState = this.$store.appinfo || false
  },
  methods: {
    jump(url) {
      if (url == '/pages/Tabbar/watching/watching' || url == '/pages/Tabbar/tj/tj' || url ==
					'/pages/index/index') {
        uni.switchTab({ url: url })
        return
      }

      uni.navigateTo({ url: url })
    }
  }
}
</script>

<style lang="scss">
	.grid_flex {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		margin: 32rpx 0;
	}

	.grid_flex::after {
		content: '';
		flex: 1;
	}

	.grid_item_flex {
		flex-shrink: 0;
		width: 33%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.grid_text {
		font-size: 28rpx;
		color: #696A6B;
		margin-top: 14rpx;
	}
</style>
